<template>
  <view>
      <view class="address-container">
		<image :src="addressIcon" class="address-icon" mode="aspectFit"></image>
		<view class="message">
			<view class="address-message">
				{{userAddress.province_name}} {{userAddress.region_name}} {{userAddress.city_name}} {{userAddress.address_info}}
			</view>
			<view class="user-message">
				<view class="user-name">
					{{userAddress.user_name}}
				</view>
				<view class="user-phone">
					{{userAddress.phone}}
				</view>
			</view>
		</view>
		<image :src="arrowRight" class="arrow-right" mode="aspectFit"></image>
      </view>
  </view>
</template>
<script>
  import {addressIcon,arrowRight} from '@/config/picUrl'
  export default
  {
    // 组件名称
    name: 'yh-user-address',
    // 组件
    components:
    {
    },
	//属性
    props:
    {
		userAddress:{
			type:Object,
			default:function()
			{
				return {
					id:1,
					user_name:'收货人',
					phone:'15688523140',
					province_name:'山东省',
					region_name:'烟台市',
					city_name:'龙口市',
					address_info:'东江街道程家疃村63号',
					address_type:10
				}
			}
		}
    },
    // 数据
    data()
    {
        return {
          msg: '用户地址',
		  addressIcon:addressIcon,
		  arrowRight:arrowRight,
		  province_name:'',
		  region_name:'',
		  city_name:'',
		  address_info:'',
		  user_name:'',
		  phone:''
        }
    },
    // 计算属性
    computed:
    {

    },
    // 监听
    watch:
    {
		userAddress:{
			handler(newValue)
			{
				//console.log(newValue)
				if(newValue)
				{
					this.user_name = newValue.user_name
					this.phone = newValue.phone
					this.province_name = newValue.province_name
					this.region_name = newValue.region_name
					this.city_name = newValue.city_name
					this.address_info = newValue.address_info
				}
				
			},
			immediate:true
		}
    },
    // 实例创建之前
    beforeCreate()
    {

    },
    // 创建
    created()
    {

    },
    // 挂载之前
    beforeMount()
    {

    },
    // 挂载 
    mounted()
    {
    },
    // 更新之前
    beforeUpdate()
    {

    },
    // 跟新后
    updated()
    {

    },
    // 销毁之前
    beforeDestroy()
    {

    },
    // 销毁后
    destroyed()
    {

    },
    // 方法
    methods:
    {

    }
  }
</script>
<style lang='scss' scoped>
	.address-container{
		width: 670rpx;
		height: 128rpx;
		background: #E8F3FF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 1rpx solid #F1F1F1;
		margin-top: 20rpx;
		margin:0 auto;
		/* background-color: pink; */
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		.address-icon{
			width: 48rpx;
			height:48rpx;
			margin-top: 24rpx;
			margin-left: 32rpx;
			marign-right:20rpx;
		}
		.message{
			width:500rpx;
			height:atuo;
			margin-top: 24rpx;
			.address-message{
				/* background-color:blue; */
				width:atuo;
				max-width: 500rpx;
				height:40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #4E5969;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				white-space: nowrap;
				overflow:hidden;
				text-overflow: ellipsis;
			}
			.user-message{
				/* background-color: pink; */
				margin-top: 8rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				width: auto;
				height: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #4E5969;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				.user-phone{
					width:auto;
					height: auto;
					margin-left:20rpx;
				}
			}
			
		}
		.arrow-right{
			width:24rpx;
			height:24rpx;
			margin-top: 52rpx;
			margin-right:16rpx;
		}
	}
</style>
